<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="110px" label-position="right">
				<el-row :gutter="1">
					<el-col :span="24">
						<div>
							<div class="titleBox" v-if="mode == ''">
								新增产品退库单
								<div>
<!--									<el-button @click="resetForm('dialogForm')" size="">退出</el-button>-->
									<el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
									<el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
									<el-button type="primary" @click="submit" :disabled="mode == 'show'">审核</el-button>
									<el-button type="danger" @click="submit" :disabled="mode == 'show'">退出</el-button>
								</div>
							</div>
							<div class="titleBox" v-if="mode =='edit'">
								编辑产品退库单
							</div>
							<div class="titleBox" v-if="mode == 'show'">
								查看产品退库单
							</div>
						</div>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据编号" prop="goods_code">
								<el-input v-model="form.goods_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据日期" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="收货人" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="收货部门" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="仓库" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="仓管员" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="退库原因" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="1">
<!--						<el-col :xs="24" :sm="3">-->
<!--							<el-form-item label="单据标签" prop="goods_name">-->
<!--								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>-->
<!--							</el-form-item>-->
<!--						</el-col>-->
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据来源" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="生产退料单号" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12">
							<el-form-item label="备注" prop="goods_code">
								<el-input v-model="form.goods_code" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								商品信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="24">
							<sc-form-table ref="table" v-model="total_data" :addTemplate="addTemplate" @dataFormChange="dataFormChange" placeholder="暂无数据" height="300">
								<el-table-column prop="purchase_price" label="商品编码"></el-table-column>
								<el-table-column prop="purchase_price" label="商品名称">
									<template #default="scope">
										<div class="selectBox">
											<el-input v-model="scope.row.name" placeholder="请选择" clearable :readonly="true" class="input"></el-input>
											<el-button type="primary" icon="el-icon-MoreFilled" size="small" @click="selectCp" :disabled="mode == 'show'"></el-button>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="purchase_price" label="规格型号"></el-table-column>
								<el-table-column prop="purchase_price" label="辅助属性"></el-table-column>
								<el-table-column prop="purchase_price" label="仓库"></el-table-column>
								<el-table-column prop="purchase_price" label="可退库数"></el-table-column>
								<el-table-column prop="purchase_price" label="已退库数"></el-table-column>
								<el-table-column prop="purchase_price" label="单位"></el-table-column>
							</sc-form-table>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
	</div>
</template>

<script>

export default {
	name: '新增BOM',
	components: {},
	data() {
		return {
			dialog: {

			},
			//表单数据
			form: {
				goods_code: "",
				goods_name: "",
				cate_id: "",
				goods_spec: "",
				unit_id: "",
				pay_type: "",
				is_unit: "",
				pro_unit_id: "",
				rep_unit_id: "",
				is_sale:0,
				is_pro:0,
				is_in: 0,
				goods_image:"",
				create_admin_id:"",
				save_admin_id:"",
				dis_admin_id:"",
				create_date:"",
				save_date:"",
				dis_date:"",
				unit_all:[{},{},{}]
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
				goods_code: [{ required: true, message: '请输入物料编码' }],
				cate_id: [{ required: true, message: '请选择物料分组' }],
			},
			total_data: [],
			customizing: false,
			addTemplate: {},
			typeDic: [
				{
					label: "常规",
				},
				{
					label: "定制",
				}
			],
			payList: [
				{
					label: "线下定金+尾款",
				},
				{
					label: "线上定金+尾款",
				},
				{
					label: "线下全款",
				},
				{
					label: "阿里巴巴全款",
				},
				{
					label: "月结",
				}
			],
			colorList: [],
			cityList: [],
			mode: '',
			sendList: [],
			cateList:[],
			unitList:[],
		}
	},
	mounted() {
		this.getCate()
		this.getUnit()
		if (this.$route.query.id) {
			this.setData()
			this.mode = this.$route.query.zhuangtai
		}
		// if (this.$route.query.renderStatus && this.$route.query.renderStatus == 'render') {
		// 	this.setRender()
		// }
	},
	watch: {
		$TOOL(e) {
			console.log('e', e)
		},
	},
	methods: {
		/**获取单位*/
		async getUnit(){
			var res = await this.$API.all.getBeiUnit.get();
			this.unitList = res.data
		},
		/**获取分类*/
		async getCate(){
			var res = await this.$API.all.getBeiCate.get();
			this.cateList = res.data
		},
		//表单注入数据
		async setData() {
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			// Object.assign(this.form, data)
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.order.list.details.get(reqData);
			this.form.id = this.$route.query.id
			this.form.order_no = res.data.order_no
			this.form.date = res.data.date
			this.form.delivery = res.data.delivery
			this.form.customer_id = res.data.customer_id
			this.form.customer_name = res.data.customer.name
			this.form.ww = res.data.customer.ww
			this.form.wechat = res.data.customer.wechat
			this.form.phone = res.data.customer.phone
			this.form.qq = res.data.customer.qq
			// this.form.email =  res.data.customer.email
			this.form.city_id = res.data.city_id
			this.form.address = res.data.address
			this.form.ali = res.data.ali
			this.form.total_money = res.data.total_money
			this.form.pre_money = res.data.pre_money
			this.form.wait_money = res.data.wait_money
			this.form.pay_method = res.data.pay_method
			this.form.send_price = res.data.send_price
			this.form.image = res.data.image
			this.form.refer_image = res.data.refer_image
			this.form.remark = res.data.remark
			this.form.mark = res.data.mark
			this.form.send_method = res.data.send_method
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.form.customer_name = ''
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.order.list.edit.post(this.form);
					} else {
						res = await this.$API.order.list.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						// this.$emit('success', this.form, this.mode)
						// this.visible = false;
						this.$message.success("操作成功")
						if (this.mode == '') {
							this.resetForm('dialogForm')
						} else {
							this.setData()
						}
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		dataFormChange() {
			this.totalCompute()
		},
	}
}
</script>
<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.selectBox {
		display: flex;
		align-items: center;
	}
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
